<script lang="ts" setup>
import PieChart from '@/views/echartsComponents/PieChart.vue'
import {
  Document,
  Menu as IconMenu,
} from '@element-plus/icons-vue';
import { useCounterStore } from '@/stores/index'
import { storeToRefs } from "pinia";

const storeMenu = useCounterStore()
const { mainPageData } = storeToRefs<any>(storeMenu)
const mainToplist = ref<any>([])
watch(mainPageData, (newValue, oldValue) => {
  nextTick(() => {
    mainToplist.value = newValue
  })
}, {
  immediate: true,
  deep: true,
})
onMounted(() => {
  storeMenu.getMainPage();
});
</script>

<template>
  <div class="topInfo">
    <el-card v-for="item in mainToplist['toplist']" :key="item['id']">
      <div class="box-card">
        <el-icon :color="item['color']">
          <span class="iconfont" :class="item['icon']"></span>
        </el-icon>
        <div class="texts">
          <span class="shuzi">{{ item['number'] }}</span>
          <span>{{ item['name'] }}</span>
        </div>
      </div>
    </el-card>
  </div>
  <div class="centerInfo">
    <div class="tableItem">
      <span class="title">未处理订单</span>
      <span class="shuzi">（{{ mainToplist['chuLiCount'] }}）</span>
      <el-table class="table" :header-cell-style="{ backgroundColor: '#0068b7', color: '#ffffff' }"
        :data="mainToplist['chuLilist']" style="width: 100%" height="250">
        <el-table-column fixed prop="realName" label="客户姓名" width="100" />
        <el-table-column prop="phoneNum" label="联系方式" width="130" />
        <el-table-column prop="itemName" label="服务项目" width="160" />
        <el-table-column prop="createDate" label="下单时间" width="180" />
        <el-table-column prop="orderNo" label="订单号" width="180" />
        <el-table-column prop="address" label="地址" width="600" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default>
            <el-button link type="primary" size="small">分派</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="tableItem">
      <span class="title">未分派工单</span>
      <span class="shuzi">（{{ mainToplist['fenPaiCount'] }}）</span>
      <el-table class="table" :header-cell-style="{ backgroundColor: '#0068b7', color: '#ffffff' }"
        :data="mainToplist['fenPaiList']" style="width: 100%" height="250">
        <el-table-column fixed prop="realName" label="客户姓名" width="100" />
        <el-table-column prop="phoneNum" label="联系方式" width="130" />
        <el-table-column prop="itemName" label="服务项目" width="160" />
        <el-table-column prop="createDate" label="下单时间" width="180" />
        <el-table-column prop="orderNo" label="订单号" width="180" />
        <el-table-column prop="address" label="地址" width="600" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default>
            <el-button link type="primary" size="small">分派</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="bottomInfo">
    <div class="title">今日工作统计</div>
    <div class="content">
      <div class="tableItem">
        <div class="itemTitle">订单统计</div>
        <PieChart class="itemEchart" :optionData="mainPageData['orderDtos']"></PieChart>
      </div>
      <div class="tableItem">
        <div class="itemTitle">工单统计</div>
        <PieChart class="itemEchart" :optionData="mainPageData['workDtos']"></PieChart>
      </div>
      <div class="tableItem">
        <div class="itemTitle">通话统计</div>
        <PieChart class="itemEchart" :optionData="mainPageData['callDtos']"></PieChart>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.topInfo {
  width: 100%;
  height: 20%;
  display: flex;
  padding: 5px;

  .el-card {
    flex-grow: 1;
    margin: 0 10px;

    .box-card {
      display: flex;
      justify-content: center;
      align-items: flex-start;

      .el-icon {
        box-sizing: content-box;
        font-size: 65px;
        // color: aquamarine;
        padding: 5px;

        span {
          font-size: 60px;
        }
      }

      .texts {
        display: flex;
        flex-direction: column;
        padding: 0 10px;
        align-items: flex-start;

        .shuzi {
          font-size: 30px;
          font-weight: bolder;
        }
      }
    }
  }

}

.centerInfo {
  width: 100%;
  height: 30%;
  display: flex;
  padding: 5px;

  .tableItem {
    width: 50%;
    margin: 5px;

    .title {}

    .shuzi {
      color: red;
      font-size: 20px;
    }

    .table {
      box-shadow: 0 0 10px 6px rgba($color: #000000, $alpha: 0.2);
    }
  }
}

.bottomInfo {
  width: 100%;
  height: 50%;
  .content{
    display: flex;
    .tableItem {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .itemTitle{
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        font-weight: bolder;
      }
      .itemEchart{
        width: 100%;
        height: 200px;
      }
    }
  }
  
}
</style>